import React, { Component } from "react";
import {
  Card,
  Avatar,
  Col,
  Row,
  Space,
  Statistic,
  Divider,
  List,
  Badge,
} from "antd";
import { Column, RadialTreeGraph, Pie } from "@ant-design/charts";
import {
  ContactsOutlined,
  MailOutlined,
  PhoneOutlined,
  HomeOutlined,
} from "@ant-design/icons";
import axios from "axios";
import { getToken } from "../../utils/auth";
import { Orderlist } from "../../services/auth";

const { Meta } = Card;

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      timesaledata: [],
      rankdata: [],
      dataSource: [],
      productCount: 0,
      customerCount: 0,
      saleSumTM: 0,
      inquirycount: [],
      quocount: [],
      ordercount: [],
    };
  }

  judgeStatus = (status) => {
    switch (status) {
      case "已完成":
        return "success";
      case "待发送":
        return "error";
      case "待发货":
        return "processing";
      case "待付款":
        return "warning";
      default:
        return "default";
    }
  };
  //获取图表数据
  componentDidMount() {
    axios.get("http://friday.nat100.top/typeSaleData").then(
      (response) => {
        this.setState({
          timesaledata: response.data,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
    axios.get("http://friday.nat100.top/getBasicInfo").then(
      (response) => {
        console.log(response.data);
        this.setState({
          productCount: response.data.productCount,
          customerCount: response.data.customerCount,
          saleSumTM: response.data.saleSumTM,
          inquirycount: response.data.inquiryCount,
          quocount: response.data.quotationCount,
          ordercount: response.data.orderCount,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
    Orderlist().then(
      (response) => {
        //拿到我们想要渲染的数据(res)
        this.setState({
          dataSource: response.data,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
    axios.get("http://friday.nat100.top/saleRankData").then(
      (response) => {
        console.log(response.data);
        this.setState({
          rankdata: response.data,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  }

  render() {
    const user = JSON.parse(getToken());
    //转换部门
    var auth = "";
    switch (user.authority) {
      case "all":
        auth = "总管";
        break;
      case "admin":
        auth = "人事部";
        break;
      case "goods":
        auth = "产品部";
        break;
      case "order":
        auth = "销售部";
        break;
      case "stock":
        auth = "仓储部";
        break;
      case "delivery":
        auth = "物流部";
        break;
      default:
        auth = "财务部";
        break;
    }
    //1.销量排名
    var config1 = {
      data: this.state.rankdata,
      xField: "product_name",
      yField: "sumCount",
      height: 300,
      label: {
        position: "middle",
        style: {
          fill: "#FFFFFF",
          opacity: 0.6,
        },
      },
      meta: {
        product_name: { alias: "产品名称" },
        sumCount: { alias: "总销量" },
      },
      columnStyle: {
        fill: "cornflowerblue",
        shadowColor: "lightskyblue",
        shadowBlur: 10,
        shadowOffsetX: 5,
        shadowOffsetY: 5,
        cursor: "pointer",
      },
    };
    //2.商品种类出库量
    var config2 = {
      height: 250,
      data: this.state.timesaledata.reverse(),

      yField: "value",
      xField: "time",
      seriesField: "type",
      isGroup: "true",
      columnStyle: {
        radius: [5, 5, 0, 0],
      },
      label: {
        style: {
          fill: "#FFFFFF",
          opacity: 0.6,
        },
      },
    };
    //3.辐射树
    const data = {
      id: "0",
      children: [
        {
          id: "1",
          children: [
            {
              id: "1.1",
              children: [{ id: "1.1.1", value: "北京和硕工厂" }],
              value: "北京",
            },
          ],
          value: "华北",
        },
        {
          id: "2",
          children: [
            {
              id: "2.1",
              children: [{ id: "2.1.1", value: "上海广达工厂" }],
              value: "上海",
            },
          ],
          value: "华东",
        },
        {
          id: "3",
          children: [
            {
              id: "3.1",
              children: [{ id: "3.1.1", value: "纽约州伟创力工厂" }],
              value: "美国",
            },
          ],
          value: "海外",
        },
      ],
      value: "工厂",
    };
    const themeColor = "#73B3D1";
    const config3 = {
      data,
      height: 300,
      nodeCfg: {
        size: 45,
        label: {
          style: {
            fontSize: 18,
            fontWeight: 500,
          },
        },
        style: {
          stroke: themeColor,
          lineWidth: 2,
          strokeOpacity: 0.45,
          shadowColor: themeColor,
          shadowBlur: 25,
        },
        nodeStateStyles: {
          hover: {
            stroke: themeColor,
            lineWidth: 2,
            strokeOpacity: 1,
          },
        },
      },
      edgeCfg: {
        style: {
          stroke: themeColor,
          shadowColor: themeColor,
          shadowBlur: 20,
        },
        endArrow: {
          type: "triangle",
          fill: themeColor,
          d: 15,
          size: 12,
        },
        edgeStateStyles: {
          hover: {
            stroke: themeColor,
            lineWidth: 2,
          },
        },
      },
      behaviors: ["drag-canvas", "zoom-canvas", "drag-node"],
    };

    //4.饼图

    var config4 = {
      height: 200,
      appendPadding: 10,
      data: this.state.inquirycount,
      angleField: "count",
      colorField: "status",
      radius: 0.8,
      label: {
        type: "inner",
        offset: "-50%",
        style: { textAlign: "center" },
        autoRotate: false,
      },
      interactions: [{ type: "element-active" }],
    };

    var config5 = {
      height: 200,
      appendPadding: 10,
      data: this.state.quocount,
      angleField: "count",
      colorField: "status",
      radius: 0.8,
      label: {
        type: "inner",
        offset: "-50%",
        style: { textAlign: "center" },
        autoRotate: false,
      },
      interactions: [{ type: "element-active" }],
    };

    var config6 = {
      height: 200,
      appendPadding: 10,
      data: this.state.ordercount,
      angleField: "count",
      colorField: "status",
      radius: 0.8,
      label: {
        type: "inner",
        offset: "-50%",
        style: { textAlign: "center" },
        autoRotate: false,
      },
      interactions: [{ type: "element-active" }],
    };

    return (
      <div style={{ background: "#f0f2f5", margin: "-24px", padding: "24px" }}>
        <Row gutter={[24, 24]}>
          <Col span={16}>
            <Space>
              <Avatar
                size={70}
                src={`http://imgdic.natapp1.cc${user.avatar}`}
              />
              <div>
                <div style={{ fontSize: 20 }}>
                  &nbsp;&nbsp;欢迎，{user.name}!
                </div>
                <div style={{ fontSize: 15, color: "gray", paddingTop: "5%" }}>
                  <Space>
                    &nbsp;
                    <HomeOutlined />
                    {auth}
                    <ContactsOutlined />
                    {`       ${user.id}`}
                    <MailOutlined />
                    {`       ${user.email}`}
                    <PhoneOutlined />
                    {`       ${user.phone}`}
                  </Space>
                </div>
              </div>
            </Space>
          </Col>
          <Col span={8}>
            <Space style={{ textAlign: "center" }}>
              <Statistic
                title="上架商品数"
                value={this.state.productCount}
                precision={0}
                valueStyle={{ color: "#1890ff" }}
              />
              <Divider type="vertical"></Divider>
              <Statistic
                title="客户总数"
                value={this.state.customerCount}
                precision={0}
                valueStyle={{ color: "#1890ff" }}
              />
              <Divider type="vertical"></Divider>
              <Statistic
                title="本月总收入"
                value={this.state.saleSumTM}
                precision={0}
                prefix="$"
                valueStyle={{ color: "#1890ff" }}
              />
            </Space>
          </Col>

          <Col span={24}>
            <Card hoverable>
              <Column {...config2} />
            </Card>
          </Col>
          <Col span={8}>
            <Card hoverable>
              <Pie {...config4} />
              <Meta description="询价单"></Meta>
            </Card>
          </Col>
          <Col span={8}>
            <Card hoverable>
              <Pie {...config5} />
              <Meta description="报价单"></Meta>
            </Card>
          </Col>
          <Col span={8}>
            <Card hoverable>
              <Pie {...config6} />
              <Meta description="订单"></Meta>
            </Card>
          </Col>
          <Col span={12}>
            <Card
              hoverable
              style={{ borderRadius: 40 }}
              headStyle={{
                backgroundColor: "transparent",
                color: "black",
                fontSize: 16,
                fontWeight: 700,
                fontFamily: "Georgia, serif",
                height: 6,
                borderRadius: 12,
              }}
            >
              <Column {...config1} />
              <Meta
                description="本月商品销售排名"
                style={{ paddingTop: "3%" }}
              ></Meta>
            </Card>
          </Col>
          <Col span={12}>
            <Card
              hoverable
              title="订单列表"
              style={{ overflowY: "auto", height: 380 }}
            >
              <List
                itemLayout="horizontal"
                dataSource={this.state.dataSource.reverse()}
                renderItem={(item) => (
                  <List.Item
                    extra={
                      <Space size={20}>
                        <Badge>{item.ship_to_address}</Badge>
                        <Badge>{`$${item.total_price}`}</Badge>
                        <Badge>{item.order_date}</Badge>
                        <Badge
                          status={this.judgeStatus(item.status)}
                          text={item.status}
                        />
                      </Space>
                    }
                  >
                    <List.Item.Meta
                      title={`id:${item.id}`}
                      style={{ textAlign: "left" }}
                    />
                  </List.Item>
                )}
              />
            </Card>
          </Col>
          <Col span={24}>
            <Card
              hoverable
              headStyle={{
                backgroundColor: "transparent",
                color: "black",
                fontSize: 16,
                fontWeight: 700,
                fontFamily: "Georgia, serif",
                height: 6,
                borderRadius: 12,
              }}
            >
              <RadialTreeGraph {...config3} />
              <Meta description="工厂分布辐射图"></Meta>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}
